<template>
  <div id="business_choose">
    <div class="title">
      <span class="left">是否使用机构业务类型</span>
      <!-- <el-button class="add" type="primary" size="small" icon="el-icon-plus" @click="goLink('/business/businessadd')">
        添加
      </el-button> -->
    </div>
		<el-table
			ref="multipleTable"
			:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize) || ''"
			style="width: 100%;padding: 32px;"
			@selection-change="handleSelectedChange"
		>	<el-table-column
			  type="selection"
			  label="全选"
			  width="55">
			</el-table-column>
			<el-table-column
				prop="number"
				label="序号"
				align="center"
				width="180">
			 <template slot-scope="scope">
				 <span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span>
				</template>
			</el-table-column>
			<el-table-column
				prop="businessName"
				width=""
				align="center"
				label="业务类型"
			>
				<template slot-scope="scope">
					<span 
						style="color: #328EF9;text-decoration:none;cursor: pointer"
						@click="goLink('/business/businesssee',scope.row.id)"
					>{{scope.row.businessName}}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="businessDescription"
				label="操作"
				align="center"
			>
				<template slot-scope="scope">
					<div style="display: flex;align-items: center;justify-content: center;">
						<img @click="goLink('/business/businesssee',scope.row.id)" class="imgGroup" src="../assets/img/yewu_02.png">
						<span @click="goLink('/business/businesssee',scope.row.id)" style="cursor: pointer;">查看详情</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<div style="background: #fff;padding: 0 32px;">
			<label style="font-size: 14px;">是否使用该业务：</label>
			<el-radio v-model="radio" label="1" @change="change">是</el-radio>
			<el-radio v-model="radio" label="2" @change="change">否</el-radio>
		</div>
		<div class="pagination">
			<el-button type="primary" @click="reuseBusinessType">确认</el-button>
		</div>
  </div>
</template>
<script>
import {allBusiness,reuseBusinessType} from '../api/getData.js'
 export default {
    name: 'business_choose',
    data: function () {
      return {
        tableData: [],
		pageSize:10,
		currentPage:1,
		selectedArr:[],
		radio:'1'
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted() {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
	beforeRouteEnter(to, from, next){
		next(vm=>{
			console.log(vm)
			// 每次进入路由执行
			vm.getAllList('true')
		})
	},
    methods: {
		change(e){
			// console.log(e)
			this.radio = e
		},
		toggleSelection(rows) {
			if (rows) {
			  rows.forEach(row => {
				this.$refs.multipleTable.toggleRowSelection(row);
			  });
			} else {
			  this.$refs.multipleTable.clearSelection();
			}
		},
		handleSelectedChange(val) {
			if(this.radio == "1"){
				let arr = []
				console.log(val)
				val.forEach((item,index)=>{
					// console.log(item.id)
					arr.push(item.id)
				})
				this.selectedArr = arr;
				console.log(arr.toString())
			}else{
				this.selectedArr = []
			}
		},
		goLink (url,id) {
			this.$router.push({
					path:url,
					query:{
						id:id
					}
				}
			)
		 },
		//提交网点使用机构业务类型 
		reuseBusinessType(){
			if(this.radio == "1"){
				if(this.selectedArr.toString() == '' || this.selectedArr.toString() == null || this.selectedArr.toString() == 'undefined'){
					this.$message.error("请勾选需要使用机构的业务类型")
				}else{
					reuseBusinessType({businessList:this.selectedArr.toString()}).then((res) =>{
						console.log(res.data,"提交网点使用机构业务类型")
						if(res.data.code === 0){
							this.$router.push('/business/businessindex')
						}else{
							this.$message.error(res.data.msg)
						}
					}).catch((error) =>{
						console.log(error)
					})
				}
			}else{
				this.$router.push('/business/businessadd')
			}
		},
		// 获取全部业务类型
		getAllList(order){
			allBusiness({
				order:order
			}).then((res) =>{
				console.log(res.data,"获取机构网点全部业务类型")
				if(res.data.code === 0){
					this.tableData = res.data.data.bussilists
				}else{
					this.tableData = []
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		handleSizeChange(val){
			this.pageSize = val;
		},
		handleCurrentChange(val) {
			this.currentPage = val
		}
    } // 函数
}
</script>
<style lang='scss'>
  #business_choose {
    .title {
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin-bottom: 24px;
      padding: 0 20px;
      .left {
        font-size: 16px;
        color: #333437;
        font-weight: bold;
      }
      .add {
        color: #fff;

      }
    }
    .el-table thead tr th {
      background-color: #fafafa;
			color: #333;
    }
    .el-table::before {
      height: 0;
    }
    .imgGroup {
      cursor: pointer;
      margin: 0 10px;
    }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 0;
      background-color: #fff;
      .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
        background-color: #fff;
        border: 1px solid #ccc;
      }
      .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #409EFF;
      }
    }

  }
</style>
